<template>
  <div>
    <PageHeader title="联系我们" description="如有任何问题或建议，请随时与我们联系。" />

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
      <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
        <h3 class="text-lg font-semibold mb-4">联系方式</h3>
        <div class="space-y-4">
          <ContactInfo
              icon="fa-map-marker"
              title="地址"
              content="北京市朝阳区科技园A座1001室"
          />
          <ContactInfo
              icon="fa-phone"
              title="电话"
              content="+86 10 8888 8888"
          />
          <ContactInfo
              icon="fa-envelope-o"
              title="邮箱"
              content="contact@example.com"
          />
          <ContactInfo
              icon="fa-clock-o"
              title="工作时间"
              content="周一至周五: 9:00 - 18:00"
          />
        </div>

        <div class="mt-8">
          <h4 class="font-medium mb-3">关注我们</h4>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition-colors">
              <i class="fa fa-github"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-blue-600 hover:text-white transition-colors">
              <i class="fa fa-linkedin"></i>
            </a>
          </div>
        </div>
      </div>

      <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
        <h3 class="text-lg font-semibold mb-4">发送消息</h3>
        <ContactForm @submit="handleSubmit" />
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import ContactInfo from '../components/ContactInfo.vue'
import ContactForm from '../components/ContactForm.vue'

export default {
  components: {
    PageHeader,
    ContactInfo,
    ContactForm
  },
  methods: {
    handleSubmit(formData) {
      // 这里可以添加实际的表单提交逻辑
      console.log('表单提交数据:', formData)
      alert('消息已发送，感谢您的联系！')
    }
  }
}
</script>